<div id="top-left">
  <span class="location-title">安全配置</span>
</div>
<div class="main-content">
  <ul nz-menu nzMode="horizontal" class="location-menu">
    <li nz-menu-item nzMatchRouter [routerLink]="['/main/user/security']">
      账户设置
    </li>
    <li nz-menu-item nzMatchRouter [routerLink]="['/main/user/profile']">
      基本资料
    </li>
    <li nz-menu-item nzMatchRouter [routerLink]="['/main/user/password']">
      密码修改
    </li>
    <li nz-menu-item nzMatchRouter [routerLink]="['/main/user/real-auth']">
      实名认证
    </li>
    <li nz-menu-item nzMatchRouter [routerLink]="['/main/user/refuse-words']">
      拒绝词汇
    </li>
  </ul>
  <nz-collapse>
    <nz-collapse-panel [nzHeader]="'认证资料'" [nzActive]="true" [nzDisabled]="true">
      <table class="edit-table">
        <colgroup>
          <col width="140">
          <col>
        </colgroup>
        <tbody>
          <tr>
            <td>用户类型：</td>
            <td>
              <nz-radio-group [nzDisabled]="data['authentication'] > 0" [(ngModel)]="data['userType']"
                (ngModelChange)="userTypeChange($event)">
                <label nz-radio [nzValue]="1">个人用户</label>
                <label nz-radio [nzValue]="2">企业用户</label>
              </nz-radio-group>
            </td>
          </tr>
          <tr>
            <td>身份证正面：</td>
            <td>
              <div *ngIf="data['authentication'] <= 0" style="max-width: 600px; padding-bottom: 10px;">
                <nz-alert nzType="info" nzMessage="请上传身份证持证图片，确保证件和人脸能同时看清楚，文件大小不超过2M。" nzShowIcon></nz-alert>
              </div>
              <nz-upload *ngIf="data['authentication'] <= 0" class="avatar-uploader" [nzAction]="uploadUrl"
                [nzHeaders]="headers" nzName="id-picture" nzListType="picture-card" [nzShowUploadList]="false"
                [nzBeforeUpload]="beforeUpload" [nzPreview]="handlePreview" (nzChange)="handleChange($event, 1)">
                <div
                  style="position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;">
                  <div
                    style="position: absolute; top: 20px; left: -8px; width: 102px; color: #fff; background-color:rgba(0,0,0,0.2);">
                    <i class="upload-icon" nz-icon [nzType]="loading ? 'loading' : 'plus'"></i>
                    <div class="ant-upload-text">Upload</div>
                  </div>
                  <img [src]="card['url1']" style="width: 100%;" />
                </div>
              </nz-upload>
              <app-image-view *ngIf="data['authentication'] > 0" [data]="[card['url1']]" [thumbnailHeight]="'150px'">
              </app-image-view>
            </td>
          </tr>
          <tr>
            <td>身份证背面：</td>
            <td>
              <nz-upload *ngIf="data['authentication'] <= 0" class="avatar-uploader" [nzAction]="uploadUrl"
                [nzHeaders]="headers" nzName="id-picture" nzListType="picture-card" [nzShowUploadList]="false"
                [nzBeforeUpload]="beforeUpload" (nzChange)="handleChange($event, 2)">
                <div
                  style="position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;">
                  <div
                    style="position: absolute; top: 20px; left: -8px; width: 102px; color: #fff; background-color:rgba(0,0,0,0.2);">
                    <i class="upload-icon" nz-icon [nzType]="loading ? 'loading' : 'plus'"></i>
                    <div class="ant-upload-text">Upload</div>
                  </div>
                  <img [src]="card['url2']" style="width: 100%;" />
                </div>
              </nz-upload>
              <app-image-view *ngIf="data['authentication'] > 0" [data]="[card['url2']]" [thumbnailHeight]="'150px'">
              </app-image-view>
            </td>
          </tr>
          <tr *ngIf="data['userType'] == 2">
            <td>营业执照：</td>
            <td>
              <div *ngIf="data['authentication'] <= 0" style="max-width: 600px; padding-bottom: 10px;">
                <nz-alert nzType="info" nzMessage="请上传身份证持证图片，确保证件和人脸能同时看清楚，文件大小不超过2M。" nzShowIcon></nz-alert>
              </div>
              <nz-upload *ngIf="data['authentication'] <=0" class="avatar-uploader" [nzAction]="uploadUrl"
                [nzHeaders]="headers" nzName="id-picture" nzListType="picture-card" [nzShowUploadList]="false"
                [nzBeforeUpload]="beforeUpload" (nzChange)="handleChange($event, 3)">
                <div
                  style="position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;">
                  <div
                    style="position: absolute; top: 20px; left: -8px; width: 102px; color: #fff; background-color:rgba(0,0,0,0.2);">
                    <i class="upload-icon" nz-icon [nzType]="loading ? 'loading' : 'plus'"></i>
                    <div class="ant-upload-text">Upload</div>
                  </div>
                  <img [src]="card['url3']" style="width: 100%;" />
                </div>
              </nz-upload>
              <app-image-view *ngIf="data['authentication'] > 0" [data]="[card['url3']]" [thumbnailHeight]="'150px'">
              </app-image-view>
            </td>
          </tr>
          <tr>
            <td></td>
            <td><button [disabled]="data['authentication'] > 0" nz-button (click)="submitAuth()"
                nzType="primary">{{data['authentication'] <= 0 ? '提交认证' : data['authentication'] === 1 ? '认证中...' : data['authentication'] === 100 ? '认证成功' : ''}}</button>
            </td>
          </tr>
        </tbody>
      </table>
    </nz-collapse-panel>
  </nz-collapse>
</div>
